import '../css/App.css';
import {Route, Routes} from "react-router-dom";
import Home from "./Home.jsx";
import {Breadcrumb, Layout, Menu, theme} from "antd";
import {Header} from "antd/lib/layout/layout.js";
import Sider from "antd/es/layout/Sider.js";
import {Content} from "antd/es/layout/layout.js";

const items2 = [0, 1, 2].map((icon, index) => {
    const key = String(index + 1);
    return {
        key: `sub${key}`,
        label: `subnav ${key}`,
        children: Array.from({length: 4}).map((_, j) => {
            const subKey = index * 4 + j + 1;
            return {
                key: subKey,
                label: `option${subKey}`,
            };
        }),
    };
});


const App = () => {
    console.log(items2)

    return (
        <div className="content">
            <Layout>
                <Header style={{display: 'flex', alignItems: 'center'}}>
                    <div className="demo-logo"/>
                </Header>
                <Layout>
                    <Sider width={200} style={{background: "#e78"}}>
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{height: '100%', borderRight: 0}}
                            items={items2}
                        />
                    </Sider>
                    <Layout style={{padding: '0 24px 24px'}}>
                        <Content
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                                background: "#fff",
                                textAlign : "start"
                            }}
                        >
                            <Routes>
                                <Route path="/cms/t" element={<Home/>}/>
                            </Routes>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>


        </div>
    );
};

export default App;
